<template>
  <canvas ref="canvas" id="right-canvas"></canvas>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

const props = defineProps({
  memberCount: {
    type: String,
    required: true,
  },
})

const CanvasStatisticsRight = () => {
  let canvas = document.querySelector<HTMLCanvasElement>('#right-canvas')
  let ctx = canvas.getContext('2d')

  let devicePixelRatio = window.devicePixelRatio || 1
  let backingStoreRatio =
    ctx['webkitBackingStorePixelRatio'] ||
    ctx['mozBackingStorePixelRatio'] ||
    ctx['msBackingStorePixelRatio'] ||
    ctx['oBackingStorePixelRatio'] ||
    ctx['backingStorePixelRatio'] ||
    1
  let canvasWidth = 288
  let canvasHeight = 50
  canvas.width = canvasWidth
  canvas.height = canvasHeight

  canvas.style.width = canvasWidth / backingStoreRatio + 'px'
  canvas.style.height = canvasHeight / backingStoreRatio + 'px'
  let ratio = devicePixelRatio / backingStoreRatio

  canvas.width = canvas.clientWidth * ratio
  canvas.height = canvas.clientHeight * ratio

  canvas.style.width = canvas.clientWidth + 'px'
  canvas.style.height = canvas.clientHeight + 'px'

  ctx.scale(ratio, ratio)

  var img = new Image()
  img.src = '/src/assets/images/canvsimage/1.png'

  img.onload = function () {
    ctx.drawImage(img, 50, 0, 60, 41)

    ctx.fillStyle = '#ED5660'
    ctx.font = 'normal bold 13px Arial,sans-serif'
    ctx.fillText('67688.88', 120, 15)
    ctx.beginPath()

    ctx.fillStyle = '#FFFFFF'
    ctx.font = '9px 微软雅黑'
    ctx.fillText(props.memberCount, 120, 30)
    ctx.beginPath()

    ctx.fillStyle = '#1EE9E8'
    ctx.font = '8px 微软雅黑'
    ctx.fillText('万美元', 160, 35)
  }
}

onMounted(() => {
  setTimeout(() => {
    CanvasStatisticsRight()
  }, 500)
})

defineExpose({
  CanvasStatisticsRight,
})
</script>

<style lang="scss" scoped>
#right-canvas {
  width: 100%;
  height: 100%;
}
</style>
